<template>
  <BusTable
    :columns="columns"
    :row-key="(row) => row.modelId"
    :scroll-x="1300"
    :pagination-config="{ pageSize: 20 }"
    :search-schemas="searchSchemas"
    :form-schemas="formSchemas"
    :form-rules="rules"
    :api-methods="apiMethods"
    modal-title="器具箱型号"
    @success="handleSuccess"
    @error="handleError"
    ref="crudTableRef"
  >
    <template #tableTitle>
      <!-- 可以添加额外的按钮 -->
    </template>
  </BusTable>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import BusTable from '@/views/businessPages/comp/busTable/index.vue';
  import {
    getCabineModelList,
    addCabineModel,
    updateCabineModel,
    deleteCabineModel,
    validateModelName,
    batchDeleteCabineModel,
  } from '@/api/business/cabinetManager/cabineModel';
  import { selectAllByType as getOpeningModeOptions } from '@/api/business/dist';
  import { useMessage } from 'naive-ui';

  const message = useMessage();
  const crudTableRef = ref();

  // 表格列配置
  const columns = [
    {
      type: 'selection',
    } as any,
    {
      title: '型号名称',
      key: 'modelName',
      width: 150,
    },
    {
      title: '生产厂家',
      key: 'prodFactory',
      width: 150,
    },
    {
      title: '工作电压',
      key: 'workingVoltage',
      width: 100,
    },
    //   {
    //     title: '电池寿命',
    //     key: 'batteryLife',
    //     width: 100,
    //     render(row) {
    //       return `${row.batteryLife} 小时`;
    //     }
    //   },
    {
      title: '工作温度',
      key: 'workingTemperature',
      width: 120,
    },
    {
      title: '防护等级',
      key: 'ipRating',
      width: 100,
    },
    {
      title: '开启方式',
      key: 'openingModeName',
      width: 120,
    },
    {
      title: '收纳布局',
      key: 'storageLayout',
      width: 100,
    },
    {
      title: '收纳容量',
      key: 'storageShoes',
      width: 120,
    },
    {
      title: '创建人',
      key: 'createName',
      width: 120,
    },
    {
      title: '创建时间',
      key: 'createTime',
      width: 160,
    },
  ];

  // 搜索表单配置
  const searchSchemas = [
    {
      field: 'modelName',
      component: 'NInput',
      label: '型号名称',
      componentProps: {
        placeholder: '请输入型号名称进行搜索',
      },
    },
  ];

  // 表单配置
  const formSchemas = [
    {
      field: 'modelName',
      component: 'NInput',
      label: '型号名称',
      placeholder: '请输入型号名称',
    },
    {
      field: 'prodFactory',
      component: 'NInput',
      label: '生产厂家',
      placeholder: '请输入生产厂家',
    },
    {
      field: 'workingVoltage',
      component: 'NInput',
      label: '工作电压',
      placeholder: '请输入工作电压',
    },
    //   {
    //     field: 'batteryLife',
    //     component: 'NInputNumber',
    //     label: '电池寿命(小时)',
    //     componentProps: {
    //       placeholder: '请输入电池寿命'
    //     }
    //   },
    {
      field: 'workingTemperature',
      component: 'NInput',
      label: '工作温度',
      placeholder: '请输入工作温度',
    },
    {
      field: 'ipRating',
      component: 'NInput',
      label: '防护等级',
      placeholder: '请输入防护等级',
    },
    {
      field: 'openingMode',
      component: 'NSelect',
      label: '开启方式',
      asyncOptions: async () => {
        // 从接口获取选项数据
        let params = {
          type: 'eq_cabinet@opening_mode',
        };
        const result = await getOpeningModeOptions(params);
        const res = result.map((item) => ({
          label: item.dictLabel,
          value: item.dictValue,
        }));
        return res;
      },
      componentProps: {
        placeholder: '请选择开启方式',
      },
    },
    {
      field: 'storageLayout',
      component: 'NInputNumber',
      label: '收纳布局',
      componentProps: {
        placeholder: '请输入收纳布局',
      },
    },
    {
      field: 'storageShoes',
      component: 'NInputNumber',
      label: '收纳容量',
      componentProps: {
        placeholder: '请输入收纳容量',
      },
    },
    {
      field: 'remark',
      component: 'NInput',
      label: '备注',
      componentProps: {
        type: 'textarea',
        placeholder: '请输入备注',
      },
    },
  ];

  // 表单验证规则
  const rules = {
    modelName: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入型号名称',
    },
    prodFactory: {
      required: false,
      trigger: ['blur', 'input'],
      message: '请输入生产厂家',
    },
    workingVoltage: {
      required: false,
      trigger: ['blur', 'input'],
      message: '请输入工作电压',
    },
    batteryLife: {
      required: false,
      type: 'number',
      trigger: ['blur', 'change'],
      message: '请输入电池寿命',
    },
    workingTemperature: {
      required: false,
      trigger: ['blur', 'input'],
      message: '请输入工作温度',
    },
    ipRating: {
      required: false,
      trigger: ['blur', 'input'],
      message: '请输入防护等级',
    },
    openingMode: {
      required: false,
      trigger: ['blur', 'change'],
      message: '请选择开柜方式',
    },
    storageLayout: {
      required: false,
      type: 'number',
      trigger: ['blur', 'change'],
      message: '请输入储鞋层数',
    },
    storageShoes: {
      required: false,
      type: 'number',
      trigger: ['blur', 'change'],
      message: '请输入每层储鞋数',
    },
  };

  // API 方法配置
  const apiMethods = {
    getList: getCabineModelList,
    add: addCabineModel,
    update: updateCabineModel,
    delete: deleteCabineModel,
    batchDelete: batchDeleteCabineModel,
    validate: validateModelName,
  };

  // 事件处理
  function handleSuccess(operation: string) {
    message.success(`${operation}操作成功`);
  }

  function handleError(error: any) {
    message.error('操作失败: ' + (error.message || '未知错误'));
  }
</script>
